<template>
  <div class="home">
    <div class="header">
      <Header />
    </div>
    <div class="main flex">
      <div class="main-left flex-column flex-1">
        <div class="main-left-top">
          <Border title="重大危险源">
            <LeftFirst />
          </Border>
        </div>
        <div class="main-left-center">
          <Border title="生产装置">
            <LeftSecond :chartData="leftSecondData" />
          </Border>
        </div>
        <div class="main-left-bottom">
          <Border title="分析单元">
            <LeftThrid :chartData="leftThridData" />
          </Border>
        </div>
      </div>
      <div class="main-center flex-column flex-3">
        <div class="main-center-top">
          <Border title="风险区域">
            <CenterTop :mapData="centerTopData" />
          </Border>
        </div>
        <div class="main-center-bottom flex">
          <div class="main-center-bottom-left flex-1">
            <Border title="本周排查任务">
              <CenterBottomLeft :chartData="centerBottomLeftData" />
            </Border>
          </div>
          <div class="main-center-bottom-right flex-1">
            <Border title="隐患未完成情况">
              <CenterBottomRight :chartData="centerBottomRightData" />
            </Border>
          </div>
        </div>
      </div>
      <div class="main-right flex-column flex-1-5">
        <div class="main-right-top">
          <Border title="发现隐患">
            <RightTop />
          </Border>
        </div>
        <div class="main-right-bottom">
          <Border title="隐患统计分析">
            <RightBottom :chartData="rightBottomData" />
          </Border>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header.vue";
import Border from "@/components/Border.vue";
import LeftFirst from "@/components/LeftFirst/index.vue";
import LeftSecond from "@/components/LeftSecond/index.vue";
import LeftThrid from "@/components/LeftThrid/index.vue";
import CenterTop from "@/components/CenterTop/index.vue";
import CenterBottomLeft from "@/components/CenterBottomLeft/index.vue";
import CenterBottomRight from "@/components/CenterBottomRight/index.vue";
import RightBottom from "@/components/RightBottom/index.vue";
import RightTop from "@/components/RightTop/index.vue";
export default {
  components: {
    Header,
    Border,
    LeftFirst,
    LeftSecond,
    LeftThrid,
    CenterTop,
    CenterBottomLeft,
    CenterBottomRight,
    RightBottom,
    RightTop
  },
  setup(props) {
    let leftSecondData = [
      { value: 40, name: "rose 1" },
      { value: 38, name: "rose 2" },
      { value: 32, name: "rose 3" },
      { value: 30, name: "rose 4" },
      { value: 28, name: "rose 5" },
      { value: 26, name: "rose 6" },
      { value: 22, name: "rose 7" },
      { value: 18, name: "rose 8" }
    ];
    let leftThridData = [5, 20, 36, 10, 10, 120, 89];
    let centerBottomLeftData = {
      data1: [18, 29, 29, 17, 14, 63],
      data2: [19, 28, 31, 14, 41, 67]
    };
    let centerBottomRightData = [
      { value: 1048, name: "Search Engine" },
      { value: 735, name: "Direct" },
      { value: 580, name: "Email" },
      { value: 484, name: "Union Ads" },
      { value: 300, name: "Video Ads" }
    ];
    let rightBottomData = {
      data1: [120, 132, 101, 134, 90, 230, 210],
      data2: [220, 182, 191, 234, 290, 330, 310],
      data3: [150, 232, 201, 154, 190, 330, 410],
      data4: [320, 332, 301, 334, 390, 330, 320],
      data5: [820, 932, 901, 934, 1290, 1330, 1320]
    };
    let centerTopData = [
      {
        name: "区域一",
        color: "red",
        pathArr: [
          [119.628881, 32.161022],
          [119.62917, 32.161109],
          [119.629219, 32.160845],
          [119.628838, 32.160818]
        ]
      },
      {
        name: "区域二",
        color: "green",
        pathArr: [
          [119.629133, 32.160423],
          [119.6296, 32.160432],
          [119.629669, 32.160232],
          [119.629278, 32.160205]
        ]
      }
      // [
      //   {
      //     lng: "117.220079",
      //     lat: "31.821415"
      //   },
      //   {
      //     lng: "117.222332",
      //     lat: "31.821397"
      //   },
      //   {
      //     lng: "117.222396",
      //     lat: "31.818242"
      //   },
      //   {
      //     lng: "117.220207",
      //     lat: "31.818698"
      //   }
      // ],
      // [
      //   {
      //     lng: "117.226194",
      //     lat: "31.825462"
      //   },
      //   {
      //     lng: "117.227997",
      //     lat: "31.825244"
      //   },
      //   {
      //     lng: "117.227846",
      //     lat: "31.823698"
      //   },
      //   {
      //     lng: "117.226452",
      //     lat: "31.823653"
      //   }
      // ]
    ];
    return {
      leftSecondData,
      leftThridData,
      centerBottomLeftData,
      centerBottomRightData,
      rightBottomData,
      centerTopData
    };
  }
};
</script>

<style lang="scss" scoped>
.home {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 0 20px 20px;
  .header {
    height: 80px;
    // background: skyblue;
    margin: 5px 0;
  }
  .main {
    height: calc(100% - 80px - 10px);
    &-left {
      margin-right: 10px;
      &-top {
        // background: purple;
        height: 30%;
      }
      &-center {
        // background: blueviolet;
        margin: 10px 0;
        height: calc(30% - 20px);
      }
      &-bottom {
        // background: rgb(223, 227, 218);
        height: 40%;
      }
    }
    &-center {
      &-top {
        // background: tan;
        margin-bottom: 10px;
        height: calc(60% - 10px);
      }
      &-bottom {
        height: 40%;
        &-left {
          // background: yellow;
          margin-right: 10px;
        }
        &-right {
          // background: papayawhip;
        }
      }
    }
    &-right {
      margin-left: 10px;
      &-top {
        // background: rgb(25, 231, 187);
        margin-bottom: 10px;
        height: calc(60% - 10px);
      }
      &-bottom {
        // background: thistle;
        height: 40%;
      }
    }
  }
}
</style>